<template>
  <el-container class="register-credential-container">
    <el-button class="register-credential-container-back" @click="back">
      <i class="el-icon-arrow-left"/>
      上一步
    </el-button>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="输入用户名"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="输入密码"
          type="password"
          @blur="checkDuplicate(('form'))"
        />
      </el-form-item>
      <el-form-item prop="checkedPassword">
        <el-input v-model="form.checkedPassword" placeholder="输入密码" type="password"/>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="register('form')">
      注册
    </el-button>
  </el-container>
</template>

<script>
import { isAlphanumeric, isAlphanumericAndSpecialChars } from '@/utils/regexValidate';
import userApiBinder from '@/axios/user';
import { successMsg } from '@/utils/message';

export default {
  name: 'RegisterEmailComp',
  props: {
    email: {
      type: String,
      default: ''
    }
  },
  data() {
    const _this = this;
    const validateUsername = async function (rule, username, callback) {
      if (!isAlphanumeric(username)) {
        callback(new Error('用户名仅支持字母大小写和数字'));
        return;
      }
      const existResult = await _this.apis.unique({ username });
      if (existResult.data.exist) {
        callback(new Error('用户名已经被注册'));
        return;
      }
      callback();
    };
    const validatePassword = function (rule, password, callback) {
      if (isAlphanumericAndSpecialChars(password)) {
        callback();
      } else {
        callback(new Error('密码仅支持字母大小写，数字和特殊字符'));
      }
    };
    const checkPassword = function (rule, checkedPassword, callback) {
      if (_this.form.password === checkedPassword) {
        callback();
      } else {
        callback(new Error('两次输入密码不一致'));
      }
    };
    return {
      form: {
        username: '',
        password: '',
        checkedPassword: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '用户名必须在6到20位', trigger: 'blur' },
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码必须在6到20位', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        checkedPassword: [
          { validator: checkPassword, trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.apis = userApiBinder(this);
  },
  methods: {
    async register(formName) {
      try {
        await this.$refs[formName].validate();
      } catch (e) {
        return;
      }
      const { username, password } = this.form;
      const resData = await this.apis.register({ email: this.email, username, password });
      if (resData.success) {
        successMsg('注册成功');
        await this.$router.push('/login');
      }
    },
    back() {
      this.$emit('changeInfo', { email: undefined });
      this.$emit('stepBack');
    },
    checkDuplicate() {
      this.$refs.form.validateField('checkedPassword');
    }
  }
};
</script>

<style scoped lang="scss">
.register-credential-container {
  &-back {
    width: fit-content;
    font-weight: 500;
    margin-bottom: 22px;
  }
}
</style>
